<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>熙心健康体检系统登录</title>
		<!-- 导入vue框架 -->
		<script src="js/v3.2.8/vue.global.prod.js"></script>
		<!-- 导入ElementPlus框架 -->
		<script src="js/element-plus.js"></script>
		<!-- 导入Elementplus Icon  -->
		<script src="js/element-icons.js"></script>
		<!-- 导入Elementplus Css样式 -->
		<link rel="stylesheet" href="css/element-plus.css">

		<style>
			body {
				margin: 0px;
			}

			#app {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
			}

			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.text {
				font-size: 14px;
			}

			.item {
				margin-bottom: 18px;
			}

			.box-card {
				width: 480px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-card class="box-card" >
				<template #header>
					<div class="card-header">
						<!-- 1. 将span标签改为h3标签 -->
						<h3>熙康体检系统 登录</h3>
						<!-- 2. 将span标签改为h3标签 -->
						<!-- <el-button class="button" text>Operation button</el-button> -->
					</div>
				</template>
				<!-- 3.div内部添加form表单组件 -->
				<!-- <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div> -->
				<div>
					<!-- 登录组件 -->
					<el-form  label-width="60px">
						
						<el-form-item label="用户名">
							<el-input  placeholder="用户名"/>
						</el-form-item>
						
						<el-form-item label="密 码">
							<el-input  placeholder="密码"/>
						</el-form-item>
						
						<el-form-item label="验证码">
						    <img src="img/authCode.jpg">
							<el-text class="mx-1" type="primary" style="margin-left: 8px;" >看不清楚，换一张</el-text>
						</el-form-item>
						
						<el-form-item >
						    <el-input placeholder="验证码"></el-input>
						</el-form-item>
						
						<el-form-item>
						    <el-checkbox>自动登录</el-checkbox>
						</el-form-item>
						
						<el-form-item>
							<el-button type="primary" @click="login">登录</el-button>
						</el-form-item>
					</el-form>
				</div>
				<!-- 4.底部变为忘记密码 -->
				<template #footer>
					<!-- 5.使用【Basic基础组件】--【Text文本】 -->
					<el-text class="mx-1" type="primary" >忘记密码</el-text>
				</template>
			</el-card>
		</div>
	</body>

	<script>
		const App = {
			data() {
				return {
				}
			},
			methods:{
				 login(){
					 location.href = "index.html";
				}
			}
			
		};
		const app = Vue.createApp(App);
		app.use(ElementPlus);
		app.mount("#app");
	</script>
</html>
